<template>
  <div class="home">
    <div class="header">
      <h2>起点中文网</h2>
      <div class="tab">
        <span :class="flags" @click="nan">男生</span>
        <span :class="flag" @click="nv">女生</span>
      </div>
      <div class="user">用户名</div>
    </div>
    <div class="main">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" />
        </van-swipe-item>
      </van-swipe>
      <van-search
        v-model="value"
        shape="round"
        background="#efefef"
        placeholder="峡谷之巅"
        input-align="center"
      />
      <van-tabbar v-model="active">
        <van-tabbar-item icon="home-o">分类</van-tabbar-item>
        <van-tabbar-item icon="search">排行榜</van-tabbar-item>
        <van-tabbar-item icon="friends-o">免费</van-tabbar-item>
        <van-tabbar-item icon="setting-o"
          ><router-link to="/Shopping">完本</router-link></van-tabbar-item
        >
        <van-tabbar-item icon="setting-o">大神</van-tabbar-item>
      </van-tabbar>
    </div>
    <div class="footer">
      <div class="module">
        <div class="title">
          <h3>热门小说</h3>
          <span class="dest">起点编辑推荐</span>
        </div>
        <van-grid :border="false" :column-num="4">
          <van-grid-item
            v-for="item in list.slice(0, 4)"
            :key="item.id"
            @click="detail(item.id)"
          >
            <van-image :src="item.img" />
            <p>{{ item.question }}</p>
            <span class="dest">{{ item.writer }}</span>
          </van-grid-item>
        </van-grid>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      value: "",
      flag: "",
      flags: "nan",
      images: [
        "https://img01.yzcdn.cn/vant/apple-1.jpg",
        "https://img01.yzcdn.cn/vant/apple-2.jpg",
      ],
      active: 0,
    };
  },
  methods: {
    ...mapActions("Home", ["http_list"]),
    nan() {
      this.flags = "nan";
      this.flag = "";
    },
    nv() {
      this.flags = "";
      this.flag = "nv";
    },
    detail(id) {
      this.$router.push(`detail/${id}`);
    },
  },
  computed: {
    ...mapState("Home", ["list"]),
  },
  created() {
    this.http_list();
  },
};
</script>

<style lang="scss">
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .header {
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-between;
    background: #efefef;
    align-items: center;
    padding: 0 20px;
    .tab {
      border: 1px solid red;
      border-radius: 5px;
      width: 30%;
      height: 50%;
      display: flex;
      justify-content: space-between;
      span {
        width: 50%;
        height: 100%;
        line-height: 35px;
        text-align: center;
      }
      .nv,
      .nan {
        border-radius: 5px;
        background: red;
        color: #fff;
      }
    }
  }
  .main {
    width: 100%;
    height: 40%;
    .van-swipe {
      width: 100%;
      height: 60%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .van-tabbar--fixed {
      bottom: inherit;
    }
  }
  .footer {
    width: 100%;
    flex: 1;
    .title {
      width: 100%;
      height: 30px;
      padding: 0 30px;
      display: flex;
      margin-top: 5px;
      align-items: center;
      h3 {
        border-left: 5px solid red;
        padding: 0 20px;
      }
    }
  }
  .dest {
    color: #ccc;
  }
}
</style>